<template>
    <div style="padding-top:20px">
        <el-row :gutter="20"  style="margin-bottom: 8px">
                <el-col :span="6">
                    <el-input
                        v-model="queryForm.groupName"
                        placeholder="用户组名称"
                        clearable
                        style="width:50%;float:left;margin-right:10px"
                        prefix-icon="el-icon-search"
                        @keyup.enter.native="queryGroupList"
                    />
                     
                    <el-select placeholder="是否授权" v-model="queryForm.editControlContained" clearable style="width:45%;">
                         <el-option value="true" label="已授权">已授权</el-option>
                         <el-option value="false" label="未授权">未授权</el-option>
                     </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button @click="queryGroupList">查询</el-button>
                     
                </el-col>
                <!-- <el-col :span="4">
                     <el-select placeholder="是否授权" style="width:50%">
                         <el-option>是</el-option>
                         <el-option>否</el-option>
                     </el-select>
                     <el-button @click="queryGroupList"  size="small">排序</el-button>
                </el-col> -->
                <el-col :span="12">
                    <div class="float-right">
                        <el-button  @click="giveRight">
                            批量授权
                        </el-button>
                        <el-button  @click="cancelRight">
                            批量取消
                        </el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table 
                :data="list" 
                stripe 
                @selection-change="handleSelectionChange"  
            >
                <el-table-column type="selection" width="50"> </el-table-column>
                <el-table-column type="index" label="编号"  />
                <el-table-column label="用户组名称" width="150">
                    <template slot-scope="scope">
                        <el-button
                            :title="scope.row.groupName"
                            type="text"
                            @click="showGroupDetail(scope.row.groupId)"
                        >
                            {{ scope.row.groupName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="创建人" width="120">
                    <template slot-scope="scope">
                        {{ scope.row.createBy }}
                    </template>
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间" min-width="98">
                    <template slot-scope="scope">
                        {{ getDateStr(scope.row.createDate) }}
                    </template>
                </el-table-column>
                <el-table-column label="内置角色" min-width="98">
                    <template slot-scope="scope">
                        <span :title="getInnerRoleList(scope.row.innerRoleList)">{{ getInnerRoleList(scope.row.innerRoleList) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否授权" min-width="98">
                    <template slot-scope="scope">
                        <el-tag
                            v-if="scope.row.editControlContained !==null"
                            :type="scope.row.editControlContained | getType"
                            >{{scope.row.editControlContained | editControlContained}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="备注">
                    <template slot-scope="scope">
                        <span :title="scope.row.description">
                            {{ scope.row.description }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="360">
                    <template slot-scope="scope">
                        <el-button type="text" @click="giveRight(scope.row.groupId, 'one')" v-if="!scope.row.editControlContained">
                            授权
                        </el-button>
                        <el-button type="text" @click="cancelRight(scope.row.groupId, 'one')" v-if="scope.row.editControlContained">
                            取消授权
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row :gutter="0">
                <el-col>
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[10, 20, 50, 100, 500, 1000]"
                        :page-size="queryForm.pageSize_"
                        :total="queryForm.total"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange"
                        @current-change="handlePageNumChange"
                    />
                </el-col>
            </el-row>
            <!-- 组内用户明细 -->
        <edu-dialog
            :show-confirm-btn="false"
            :visible.sync="showDetailDialog"
            title="组内用户明细"
            width="1000px"
            class="systemDialog"
            @close="closeShowDetail"
        >
            <el-row :gutter="20" class="border-bottom" style="height: 56px;">
                <el-col :span="6">
                    <el-input
                        v-model="queryUserForm.userName"
                        placeholder="账号或用户名"
                        clearable
                        suffix-icon="el-icon-query"
                        @keyup.enter.native="queryUsersUnderGroup(true)"
                    />
                </el-col>
                <el-col :span="6">
                    <el-button @click="queryUsersUnderGroup(true)">
                        {{ $t('message.filter') }}
                    </el-button>
                </el-col>
                <el-col :span="12">
                    <div class="float-right">
                        <el-tooltip content="默认全部导出" placement="bottom" effect="light">
                            <el-button @click="exportUsers">导出</el-button>
                        </el-tooltip>
                        <el-button @click="deleteUsersBatch">{{ $t('message.delete') }}</el-button>
                    </div>
                </el-col>
            </el-row>
            <div style="height: calc(100% - 98px);">
                <el-table
                    :data="usersUnderGroup"
                    style="height: 100%;overflow-y: auto;"
                    class="scrollbarSty"
                    stripe
                    @selection-change="handleUsersSelectChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column label="账号">
                        <template slot-scope="scope">
                            {{ scope.row.studentId }}
                        </template>
                    </el-table-column>
                    <el-table-column label="用户名">
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="培养层次"><template slot-scope="scope">{{scope.row.trainingLevel}}</template></el-table-column>
          <el-table-column label="所属部门"><template slot-scope="scope"></template></el-table-column>-->
                    <el-table-column label="联系电话">
                        <template slot-scope="scope">
                            {{ scope.row.phoneNumber }}
                        </template>
                    </el-table-column>
                    <el-table-column label="联系邮箱" min-width="150">
                        <template slot-scope="scope">
                            {{ scope.row.email }}
                        </template>
                    </el-table-column>
                    <el-table-column label="所属学院" min-width="150">
                        <template slot-scope="scope">
                            {{ scope.row.facultyI18n }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                @click="deleteUser(scope.row.studentId, scope.row.userType)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row>
                <el-pagination
                    :current-page="queryUserForm.pageNum_"
                    :page-sizes="[20, 50, 100, 500, 1000]"
                    :page-size="queryUserForm.pageSize_"
                    :total="queryUserForm.total"
                    layout="total, prev, pager, next"
                    style="float: right;margin:10px 60px 0 0;"
                    @size-change="handleSizeChange1"
                    @current-change="handlePageNumChange1"
                />
            </el-row>
        </edu-dialog>
    </div>
    
</template>

<script>
import { queryEditControl, deleteEditControl, addEditControl } from "common/src/api/studentinfo";
import { getUserInfoListByGroupId, batchDelUserGroupRel } from "common/src/api/user";
import { queryDic } from 'common/src/api/dictionary'
export default {
    data() {
        return {
            queryForm: {
                groupName: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 10,
                editControlContained: ''
            },
            queryUserForm: {
                userName: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20,
                groupId: ''
            },
            multipleSelection: [],
            list: [],
            showDetailDialog: false,
            usersUnderGroup : [],
            pickedUsersUnderGroup: [],
            options: {
            innerRoleList: [], //内置角色支持多选
            }
        }
    },
     mounted() {
        this.queryGroupList();
        this.initOptions() //获取数据字典
    },
    filters: {
        editControlContained(val) {
            switch (val) {
                case true:
                    return '是'
                case false:
                    return '否'
                default:
                    return ' '
            }
        },
        getType(val) {
            switch (val) {
                case false:
                    return 'info'
                case true:
                    return 'success'
                default:
                    return val
            }
        }
    },
    methods: {
        // 获取编辑权限列表
        getEditList() {
            queryEditControl(this.queryForm).then(res => {
                if(res.code === 200) {
                    this.list = res.data.list
                    this.queryForm.total = res.data.total_
                }
            })
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        queryGroupList() {
            this.queryForm.pageNum_ = 1
            this.queryForm.total = 0
            this.getEditList()
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.getEditList()
        },
        handlePageNumChange(val) {
            this.queryForm.pageNum_ = val
            this.getEditList()
        },
        handleUsersSelectChange(items) {
            this.pickedUsersUnderGroup = items
        },
        getDateStr(d) {
            if (d != null && d != undefined && d != 0) {
                return new Date(d).toLocaleDateString()
            } else {
                return ''
            }
        },
        getInnerRoleList(roleList) {
            // let text = this.options.innerRoleList.find
            let roleLable = '';
            this.options.innerRoleList.map(item => {
                if(roleList.indexOf(item.value) > -1) {
                    roleLable += item.label + ','
                }
            })
            return roleLable.slice(0, roleLable.length-1);
        },
        giveRight(groupId, type) {
            let parm = []
            if(type === 'one') {
                parm = [groupId]
            } else {
                if(this.multipleSelection && this.multipleSelection.length > 0) {
                    this.multipleSelection.forEach(val => {
                        parm.push(val.groupId)
                    })
                } else {
                    this.$message({
                    type: 'warning',
                    message: '请至少选择一条数据'
                })
                return
                }
            }
            addEditControl(parm).then(res=> {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '授权成功.'
                    })
                    this.getEditList()
                }

            })

        },
        cancelRight(groupId, type) {
            let parm = []
            if(type === 'one') {
                parm = [groupId]
            } else {
                if(this.multipleSelection && this.multipleSelection.length > 0) {
                    this.multipleSelection.forEach(val => {
                        parm.push(val.groupId)
                    })
                } else {
                    this.$message({
                    type: 'warning',
                    message: '请至少选择一条数据'
                })
                return
                }
            }
            deleteEditControl(parm).then(res=> {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '取消授权成功.'
                    })
                    this.getEditList()
                }
            })
        },
        initOptions() {
            let params = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_NZYHJS']
            }
            queryDic(params)
                .then(res => {
                    if (res.code == 200) {
                        this.fillSelect(res.data)
                        // this.getEditList()
                    }
                })
                .catch(error => {
                    console.log(error)
                    // this.getEditList()
                })
        },
        fillSelect(data) {
            this._fill('innerRoleList', data.X_NZYHJS)
        },
        _fill(type, data) {
            for (let key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                })
            }
        },
        showGroupDetail(groupId) {
            this.queryUserForm.groupId = groupId
            this.showDetailDialog = true
            this.queryUsersUnderGroup(true)
        },
        closeShowDetail() {
            this.queryUserForm.userName = ''
        },
        exportUsers() {
            let userList = this.pickedUsersUnderGroup.map(item => {
                return item.studentId
            })
            let params = {
                groupId: this.queryUserForm.groupId,
                userIds: userList.join(',')
            }
            let url = `/api/userservice/userGroup/exportGroupUser?groupId=${
                params.groupId
            }&userIds=${params.userIds}`
            window.open(url, '_self')
        },
        queryUsersUnderGroup(reset) {
            if (reset) {
                this.queryUserForm.pageNum_ = 1
                this.queryUserForm.total = 0
            }
            this.getUserInfoListByGroupId(this.queryUserForm)
        },
        getPickedUsersUnderGroup() {
            return this.pickedUsersUnderGroup.map((item, index) => {
                return { userId: item.studentId, userType: item.userType }
            })
        },
        handlePageNumChange1(val) {
            this.queryUserForm.pageNum_ = val
            this.queryUsersUnderGroup()
        },
        handleSizeChange1(val) {
            this.queryUserForm.pageSize_ = val
            this.queryUsersUnderGroup()
        },
        async getUserInfoListByGroupId(queryForm) {
            try {
                let resp = await getUserInfoListByGroupId(queryForm)
                if (resp && resp.data && resp.code == 200) {
                    this.usersUnderGroup = resp.data.list || []
                    this.queryUserForm.total = resp.data.total_ || 0
                } else {
                    this.$message({
                        type: 'error',
                        message: '查询出错, 请重试'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        deleteUsersBatch(userIds) {
            this.deleteUsersRel(this.getPickedUsersUnderGroup())
        },
         
        deleteUsersRel(users) {
            let that = this
            let data = {
                groupId: this.queryUserForm.groupId,
                userList: users
            }
            if (!data.userList.length) {
                this.$message({
                    type: 'warning',
                    message: '请至少选择一条要删除的数据'
                })
                return
            }
            this.batchDelUserGroupRel(data)
        },
        deleteUser(_userId, _userType) {
            this.deleteUsersRel([{ userId: _userId, userType: _userType }])
        },
        async batchDelUserGroupRel(queryForm) {
            try {
                let resp = await batchDelUserGroupRel(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功.'
                    })
                    this.pickedUsersUnderGroup = []
                    this.queryUsersUnderGroup(true)
                } else {
                    this.$message({
                        type: 'error',
                        message: '操作失败.'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        
    }
    
}
</script>